<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center myRent_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub myRent_fd0_0'>
					<view class='flex flex-wrap align-center myRent_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  myRent_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='myRent_fd0_0_c1_c0'>我要出租</text>
					</view>
					<view class='flex flex-wrap align-center justify-end myRent_fd0_0_c0'>
						<text class='myRent_fd0_0_c2_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/grzx/submitRecord/submitRecord`">记录</text>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!--选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker1" :visible.sync="pickerDiy1695866015578"
				:label.sync='hotelType_label' :value.sync='hotelType_value' :options='hotelType' mode='selector'
				:mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
				:default-props='{"label":"name","value":"aid"}'>
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between myRent_picker1_0'>
						<text class='myRent_picker1_0_c0' @tap="$refs.benbenWritePickerCodepicker1.cancel()">取消</text>
						<text class='myRent_picker1_0_c1'>房屋类型</text>
						<text class='myRent_picker1_0_c2'
							@tap="$refs.benbenWritePickerCodepicker1.pickerConfirm()">确认</text>
					</view>
				</template>
			</benben-picker>
			<!--选择器结束 -->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
				<image class='myRent_fd2_0' mode="aspectFit" :src='STATIC_URL+"128.png"'></image>
				<view class='flex flex-direction flex-wrap align-stretch myRent_fd2_1'>
					<view class='flex flex-direction flex-wrap align-stretch myRent_fd2_1_c0'>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0' @click="choseLocation">
							<text class='myRent_fd2_1_c0_c0_c0'>城市</text>
							<text class='myRent_fd2_1_c0_c0_c1'>{{locationCity}}</text>
							<image class='myRent_fd2_1_c0_c0_c2' mode="aspectFit" :src='STATIC_URL+"110.png"'></image>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'
							@tap.stop="pickerDiy1695866015578=true">
							<text class='myRent_fd2_1_c0_c0_c0'>房屋类型</text>
							<text class='myRent_fd2_1_c0_c0_c1'>{{hotelType_label?hotelType_label:'选择'}}</text>
							<image class='myRent_fd2_1_c0_c0_c2' mode="aspectFit" :src='STATIC_URL+"110.png"'></image>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>地址</text>
							<input class='myRent_fd2_1_c0_c2_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" v-model="address" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>楼栋门牌</text>
							<input class='myRent_fd2_1_c0_c2_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" v-model="building_number" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>期望租金</text>
							<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" v-model="expected_rent" />
							<text class='myRent_fd2_1_c0_c4_c2'>元</text>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>姓名</text>
							<input class='myRent_fd2_1_c0_c2_c1' v-model="full_name" type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="7" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>电话</text>
							<input class='myRent_fd2_1_c0_c2_c1' v-model="telephone" type="number" :placeholder="`请输入`" confirm-type="done"
								:maxlength="11" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c7_c0'>产权信息</text>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>产权人（原房东）</text>
							<input class='myRent_fd2_1_c0_c8_c1' v-model="original_landlords_name" type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="7" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>电话</text>
							<input class='myRent_fd2_1_c0_c2_c1' v-model="olpn" type="number" :placeholder="`请输入`" confirm-type="done"
								:maxlength="11" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>承包人（二房东）</text>
							<input class='myRent_fd2_1_c0_c8_c1' v-model="second_landlords_name" type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="7" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>电话</text>
							<input class='myRent_fd2_1_c0_c2_c1' v-model="second_landlords_phone_number" type="number" :placeholder="`请输入`" confirm-type="done"
								:maxlength="11" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c7_c0'>消防登记</text>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>烟感器</text>
							<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
							<text class='myRent_fd2_1_c0_c4_c2'>个</text>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>喷头</text>
							<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
							<text class='myRent_fd2_1_c0_c4_c2'>个</text>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>灭火器</text>
							<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
							<text class='myRent_fd2_1_c0_c4_c2'>个</text>
						</view>
						<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
							<text class='myRent_fd2_1_c0_c0_c0'>逃生器具</text>
							<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`" confirm-type="done"
								:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
							<text class='myRent_fd2_1_c0_c4_c2'>个</text>
						</view>
						<view class='flex flex-direction flex-wrap align-stretch'
							v-if=" hotelType_value=='4' || hotelType_value=='6'">
							<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
								<text class='myRent_fd2_1_c0_c0_c0'>消防通道</text>
								<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`"
									confirm-type="done" :maxlength="-1"
									placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
								<text class='myRent_fd2_1_c0_c4_c2'>个</text>
							</view>
							<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
								<text class='myRent_fd2_1_c0_c0_c0'>安全通道</text>
								<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`"
									confirm-type="done" :maxlength="-1"
									placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
								<text class='myRent_fd2_1_c0_c4_c2'>个</text>
							</view>
							<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
								<text class='myRent_fd2_1_c0_c0_c0'>消防登高点</text>
								<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`"
									confirm-type="done" :maxlength="-1"
									placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
								<text class='myRent_fd2_1_c0_c4_c2'>个</text>
							</view>
							<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
								<text class='myRent_fd2_1_c0_c0_c0'>消防栓</text>
								<input class='myRent_fd2_1_c0_c4_c1' type="text" :placeholder="`请输入`"
									confirm-type="done" :maxlength="-1"
									placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" />
								<text class='myRent_fd2_1_c0_c4_c2'>个</text>
							</view>
						</view>
						<view class='flex flex-direction flex-wrap align-stretch'
							v-if=" hotelType_value=='1' || hotelType_value=='2' || hotelType_value=='3'">
							<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
								<text class='myRent_fd2_1_c0_c0_c0'>厨房</text>
								<benben-select-diy ref="showSelectPopup1695866271060" class-name='flex flex'
									:items.sync="kitchen" v-model="kitchen_value" default-type="value"
									default-label="name" :allow-cancel='false' type="radio" :disabled='false'>
									<template v-for='(item,key0) in kitchen'>
										<view v-if="item.isSelected"
											class='flex align-center justify-center flex myRent_fd2_1_c0_c18_c0_c1_c0'
											:key="key0" @tap="$refs.showSelectPopup1695866271060.tapHandle(key0)">
											<image class='myRent_fd2_1_c0_c18_c0_c1_c0_c0' mode="aspectFit"
												:src='STATIC_URL+"8.png"'></image>
											<text class='myRent_fd2_1_c0_c18_c0_c1_c0_c1'>{{item.name}}</text>
										</view>
										<view v-else
											class='flex align-center justify-center flex myRent_fd2_1_c0_c18_c0_c1_c0'
											:key="key0" @tap="$refs.showSelectPopup1695866271060.tapHandle(key0)">
											<image class='myRent_fd2_1_c0_c18_c0_c1_c0_c0' mode="aspectFit"
												:src='STATIC_URL+"6.png"'></image>
											<text class='myRent_fd2_1_c0_c18_c0_c1_c1_c1'>{{item.name}}</text>
										</view>
									</template></benben-select-diy>
							</view>
							<view class='flex flex-wrap align-center justify-between myRent_fd2_1_c0_c0'>
								<text class='myRent_fd2_1_c0_c0_c0'>燃气</text>
								<benben-select-diy ref="showSelectPopup1695866312017" class-name='flex flex'
									:items.sync="gas" v-model="gas_value" default-type="value" default-label="name"
									:allow-cancel='false' type="radio" :disabled='false'>
									<template v-for='(item,key0) in gas'>
										<view v-if="item.isSelected"
											class='flex align-center justify-center flex myRent_fd2_1_c0_c18_c1_c1_c0'
											:key="key0" @tap="$refs.showSelectPopup1695866312017.tapHandle(key0)">
											<image class='myRent_fd2_1_c0_c18_c0_c1_c0_c0' mode="aspectFit"
												:src='STATIC_URL+"8.png"'></image>
											<text class='myRent_fd2_1_c0_c18_c0_c1_c0_c1'>{{item.name}}</text>
										</view>
										<view v-else
											class='flex align-center justify-center flex myRent_fd2_1_c0_c18_c1_c1_c0'
											:key="key0" @tap="$refs.showSelectPopup1695866312017.tapHandle(key0)">
											<image class='myRent_fd2_1_c0_c18_c0_c1_c0_c0' mode="aspectFit"
												:src='STATIC_URL+"6.png"'></image>
											<text class='myRent_fd2_1_c0_c18_c0_c1_c1_c1'>{{item.name}}</text>
										</view>
									</template></benben-select-diy>
							</view>
						</view>
					</view>
					<button class='myRent_fd2_1_c1' v-if="item" @click="changeSubVal">提交申请</button>
					<button class='myRent_fd2_1_c1' v-else @click="getSubVal">提交申请</button>
				</view>
			</view>

			<!---flex布局flex布局结束-->


		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				priceQiw:'',
				floorNum:'',
				address:'',
				locationCity:'杭州',
				"pickerDiy1695866015578": false,
				"kitchen": [{
					"name": "无",
					"value": "1",
					"image": ""
				}, {
					"name": "开放式",
					"value": "2",
					"image": ""
				}, {
					"name": "封闭式",
					"value": "3",
					"image": ""
				}],
				"kitchen_value": "",
				"gas": [{
					"name": "无",
					"value": "1",
					"image": ""
				}, {
					"name": "有",
					"value": "2",
					"image": ""
				}],
				"gas_value": "",
				"hotelType": [],
				"hotelType_value": "",
				"hotelType_label": "",
				item:{},
				building_number: "",
				expected_rent: "",
				full_name: "",
				telephone: "",
				original_landlords_name: "",
				olpn: "",
				second_landlords_name: "",
				second_landlords_phone_number: "",
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.get_housecate()
			let {
				item
			} = options
			if(item){
				this.item = JSON.parse(item)
				console.log(this.item);
				this.address = this.item.address
				this.hotelType_value = this.item.housecate_id
				this.hotelType_label = this.item.housecate_name
				this.building_number = this.item.building_number
				this.expected_rent = this.item.expected_rent
				this.full_name = this.item.full_name
				this.telephone = this.item.telephone
				this.original_landlords_name = this.item.original_landlords_name
				this.olpn = this.item.olpn
				this.second_landlords_name = this.item.second_landlords_name
				this.second_landlords_phone_number = this.item.second_landlords_phone_number
				this.locationCity = this.item.city
			}
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			var that = this
			uni.getStorage({
				key:'Visit_key',
				success: (res) => {
					that.locationCity = res.data[0].cityName
				}
			})
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			get_housecate(){
				this.$api.post('/m6752/66f9046a00f6a').then(res=>{
					if(res.data.code == 1){
						this.hotelType = res.data.data
					}
				})
			},
			pickerConfirm(){
				console.log(this.hotelType);
			},
			// /pages/grzx/successSubmit/successSubmit
			// 提交
			getSubVal(){
				let dataVal = {
					housecate_id:this.hotelType_value,
					city:this.locationCity,
					address:this.address,
					building_number:this.building_number,
					expected_rent:this.expected_rent,
					full_name:this.full_name,
					telephone:this.telephone,
					original_landlords_name:this.original_landlords_name,
					olpn:this.olpn,
					second_landlords_name:this.second_landlords_name,
					second_landlords_phone_number:this.second_landlords_phone_number
				}
				this.$api.post('/m6752/66f90a28c9842',dataVal).then(res=>{
					if(res.data.code == 1){
						uni.reLaunch({
							url:'/pages/grzx/successSubmit/successSubmit'
						})
					}else{
						this.$message.info(res.data.msg)
					}
				})
			},
			changeSubVal(){
				let dataVal = {
					aid:this.item.aid,
					housecate_id:this.hotelType_value,
					city:this.locationCity,
					address:this.address,
					building_number:this.building_number,
					expected_rent:this.expected_rent,
					full_name:this.full_name,
					telephone:this.telephone,
					original_landlords_name:this.original_landlords_name,
					olpn:this.olpn,
					second_landlords_name:this.second_landlords_name,
					second_landlords_phone_number:this.second_landlords_phone_number
				}
				this.$api.post('/m6752/66f90b186a5fe',dataVal).then(res=>{
					if(res.data.code == 1){
						uni.reLaunch({
							url:'/pages/grzx/successSubmit/successSubmit'
						})
					}else{
						this.$message.info(res.data.msg)
					}
				})
			},
			// 切换城市定位
			choseLocation(){
				uni.navigateTo({
					url:'/pages/mine/selectCity/selectCity'
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.myRent_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myRent_fd0_0_c2_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 36rpx;
	}

	.myRent_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		line-height: 0rpxletter-spacing;
	}

	.myRent_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.myRent_fd0_0_c0 {
		width: 120rpx;
	}

	.myRent_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.myRent_picker1_0_c2 {
		color: rgba(252, 95, 128, 1);
		font-size: 32rpx;
	}

	.myRent_picker1_0_c1 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
	}

	.myRent_picker1_0_c0 {
		font-size: 32rpx;
		color: var(--benbenFontColor2);
	}

	.myRent_picker1_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.myRent_fd2_1_c1 {
		background: #FC5F80;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		width: 638rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #fff;
		height: 88rpx;
		font-weight: 500;
		margin: 32rpx 0rpx 32rpx 24rpx;
	}

	.myRent_fd2_1_c0_c18_c1_c1_c0 {
		margin: 0rpx 0rpx 0rpx 72rpx;
	}

	.myRent_fd2_1_c0_c18_c0_c1_c1_c1 {
		color: #999999;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 28rpx;
	}

	.myRent_fd2_1_c0_c18_c0_c1_c0_c1 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 28rpx;
	}

	.myRent_fd2_1_c0_c18_c0_c1_c0_c0 {
		width: 32rpx;
		height: 32rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.myRent_fd2_1_c0_c18_c0_c1_c0 {
		margin: 0rpx 0rpx 0rpx 64rpx;
	}

	.myRent_fd2_1_c0_c8_c1 {
		text-align: right;
		width: 200rpx;
	}

	.myRent_fd2_1_c0_c7_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.myRent_fd2_1_c0_c4_c2 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.myRent_fd2_1_c0_c4_c1 {
		text-align: right;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.myRent_fd2_1_c0_c2_c1 {
		text-align: right;
	}

	.myRent_fd2_1_c0_c0_c2 {
		width: 10rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 25rpx;
	}

	.myRent_fd2_1_c0_c0_c1 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 0rpx auto;
	}

	.myRent_fd2_1_c0_c0_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
	}

	.myRent_fd2_1_c0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.myRent_fd2_1_c0 {
		background: var(--benbenbgColor1);
		padding: 0rpx 23rpx 0rpx 25rpx;
		border-radius: 16rpx;
		background-size: 100% auto;
	}

	.myRent_fd2_1 {
		padding: 24rpx 24rpx 0rpx 24rpx;
	}

	.myRent_fd2_0 {
		width: 750rpx;
		height: 400rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
</style>